<!--
* description: 备件交期管理-备件交期及配送状态查询
* author: zouzhu
* createdDate: 2021-01-28
-->
<template>
  <div class="app-container app-container-table">
    <one-table-template
      ref="multipleTable"
      :key="oneTableKey"
      :dynamic-buttons="tableButtons"
      :dynamic-components="tableComponents"
      :dynamic-table-cols="tableCols"
      :dynamic-api-config="apiConfig"
      :dynamic-form-fields="formField"
      :dynamic-is-show-select="true"
      :dynamic-is-show-more-btn="true"
      :dynamic-is-init-table="true"
    />
  </div>
</template>

<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import api from '@/api/pa/sparepartsDeliveryManagement'
import Vue from 'vue'

export default {
  name: 'ManualReplySettingBO',

  components: {
    OneTableTemplate
  },

  mixins: [oneTableWithViewTemplateMixins],
  // 阻塞路由预加载网格中组件的数据
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData([to.path, ''], function() {
      next()
    })
  },

  data() {
    const viewPageCode = this.$route.path

    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])

    return {
      apiConfig: api.findPartDeliveryStatusQuery,

      tableButtons: [
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          name: 'search',
          clickEvent: () => this.queryTable(1),
          text: this.$t('sys.button.query'), // 查询
          position: 'right',
          fuzzySearch: true
        },
        {
          compKey: 'btnKey2',
          size: 'small',
          name: 'export',
          clickEvent: () => this.exportExcel(),
          text: '导出',
          position: 'left'
        },
        {
          compKey: 'btnKey4',
          size: 'small',
          name: 'reset',
          clickEvent: () => this.reset(),
          text: '重置',
          position: 'right'
        }
      ],

      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableComponents
          : [
            {
              compKey: 'compKey1',
              labelName: '网点编码：',
              codeField: 'dlrCode',
              component: () => import('@/components/pa/dlrCode'),
              type: 'inputText',
              isMust: true
            },
            {
              compKey: 'compKey2',
              labelName: '网点名称：',
              codeField: 'dlrShortName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: true,
              disabled: true
            },
            {
              compKey: 'compKey3',
              labelName: '订单编号：',
              codeField: 'purOrderCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: true
            },
            {
              compKey: 'compKey4',
              labelName: '订单日期：',
              codeField: 'purStartDate,purEndDate',
              component: () => import('@/components/org/datePicker/datePicker.vue'),
              dateType: 'daterange',
              isMul: false,
              isMust: true
            },
            {
              compKey: 'compKey5',
              labelName: '备货单号：',
              codeField: 'stockUpCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: false
            },
            {
              compKey: 'compKey6',
              labelName: '备货日期：',
              codeField: 'createdStartDate,createdEndDate',
              component: () => import('@/components/org/datePicker/datePicker.vue'),
              dateType: 'daterange',
              isMul: false,
              isMust: false
            },
            {
              compKey: 'compKey7',
              labelName: '发货仓库：',
              codeField: 'warehouseId',
              component: () => import('@/components/org/commonSelect'),
              oFields: 'warehouseId,warehouseName',
              customObj: {
                api: api.findPartDeliverWareHouse,
                listQuery: {
                  warehouseId: ''
                },
                selectType: '1'
              },
              type: 'dropdownList',
              isMul: false,
              isMust: false
            },
            {
              compKey: 'compKey8',
              labelName: '备件编号：',
              codeField: 'partNo',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: false
            }
          ],

      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            {
              prop: 'updateControlId',
              label: '并发控制字段',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'dlrCode',
              label: '收货网点编码'
            },
            {
              prop: 'dlrShortName',
              label: '收货网点名称'
            },
            {
              prop: 'warehouseName',
              label: '所属仓库'
            },
            {
              prop: 'warehouseName',
              label: '发货仓库'
            },
            {
              prop: 'transportModeName',
              label: '运输方式'
            },
            {
              prop: 'purOrderCode',
              label: '订单编号',
              width: 140
            },
            {
              prop: 'purDate',
              label: '订单时间',
              width: 140
            },
            {
              prop: 'partNo',
              label: '备件编号'
            },
            {
              prop: 'partName',
              label: '备件名称'
            },
            {
              prop: 'stockUpCode',
              label: '备货单号',
              width: 140
            },
            {
              prop: 'createdDate',
              label: '备货单创建时间',
              width: 140
            },
            {
              prop: 'outCreatedDate',
              label: '实际出库时间',
              width: 140
            },
            {
              prop: 'outCode',
              label: '出库单号',
              width: 140
            },
            {
              prop: 'endDate',
              label: '预计到店时间',
              width: 140
            }
          ],

      formField: this.$utils.getFormField(this, {
        dlrCode: '',
        dlrShortName: '',
        purOrderCode: '',
        stockUpCode: '',
        warehouseNameId: '',
        partNo: '',
        purStartDate: '',
        purEndDate: '',
        createdStartDate: '',
        createdEndDate: '',
        warehouseId: ''
      }, this.$ConfigCache.CacheConfig.cacheData[viewPageCode])
    }
  },

  mounted() {
    this.queryTable(1)
  },

  methods: {
    // 导出
    exportExcel() {
      const fileName = this.$utils.fileNameWithTime('备件交期及配送状态查询.xlsx')
      this.$requestAPI({
        apiUrl: api.exportPartDeliveryStatusQuery.APIUrl,
        variables: { dataType: 'excel' }
      }).then(res => {
        this.$utils.downloadFile(res, fileName)
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>
